<template>
	<view class="container">

		<!-- 上传证件区域 -->
		<view class="upload-section">
			<view class="section-title">上传证件</view>
			<view class="card-upload-container">
				<!-- 身份证正面 -->
				<view class="card-upload-item">
					<!-- 添加点击事件 -->
					<view class="card-wrapper" @click="handleCardClick('front')">
						<image :src="frontImage || defaultImage" mode="aspectFill" class="card-image"></image>
						<!-- 上传后遮罩层 -->
						<view class="card-mask" v-if="frontImage && frontImage !== defaultImage">
							<button class="reupload-btn" @click.stop="handleReupload('front')">重新上传</button>
						</view>
					</view>
					<view class="card-label">证件正面</view>
				</view>
				<!-- 身份证反面 -->
				<view class="card-upload-item">
					<!-- 添加点击事件 -->
					<view class="card-wrapper" @click="handleCardClick('back')">
						<image :src="backImage || defaultImagefang" mode="aspectFill" class="card-image"></image>
						<!-- 上传后遮罩层 -->
						<view class="card-mask" v-if="backImage && backImage !== defaultImage">
							<button class="reupload-btn" @click.stop="handleReupload('back')">重新上传</button>
						</view>
					</view>
					<view class="card-label">证件反面</view>
				</view>
			</view>
		</view>

		<!-- 信息核实区域 -->
		<view class="verify-section">
			<view class="verify-header">
				<view class="section-title">信息核实</view>
				<view class="verify-desc">请核实自动识别的信息是否正确</view>
			</view>

			<view class="info-group">
				<view class="info-item">
					<view class="info-label">姓　　名</view>
					<view class="info-value">{{ name || '请上传证件' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">证件类型</view>
					<view class="info-value">
						<picker 
							@change="onIdTypeChange"
							:range="idTypeOptions"
							:value="idTypeIndex"
							class="id-type-picker"
						>
							<view class="picker-text">
								{{ idType || '请选择证件类型' }}
							</view>
						</picker>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">身份证号</view>
					<view class="info-value">{{ idNumber || '请上传证件' }}</view>
				</view>
			</view>
		</view>

		<!-- 下一步按钮 :disabled="!isFormValid" -->
		<view class="button">
			<button class="next-btn" :disabled="!isFormValid" @click="handleNext" :style="{ backgroundColor: isFormValid ? '#BEFF33' : '#D0D4D7', color: isFormValid ? '#0E1C37' : '#878B9A' }">
				下一步
			</button>
		</view>

	</view>
</template>

<script src="./Authn.js">
</script>

<style lang="scss" src="./Authn.scss"></style>